<template>
  <div class="oe-loading" :style="{ background: color }" v-show="visible">
    <a-spin :tip="text">
      <a-icon slot="indicator" v-if="icon" :type="icon" style="font-size: 24px" spin />
    </a-spin>
  </div>
</template>

<script>
export default {
  name: 'oeLoading',
  data() {
    return {
      visible: true
    };
  },
  props: {
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: 'rgba(255,255,255,0.3)'
    },
    text: {
      type: String,
      default: 'loading...'
    }
  }
};
</script>
